Çoğu markanın web sitesinin mobil arabirimlerine veya mobil uygulamalarına baktığımızda hamburger menü ikonuyla tetiklenen yan menü kullanımıyla karşılaşırız. Peki, hamburger menü sanıldığı gibi bir fayda mı sağlıyor, yoksa daha fazla probleme mi neden oluyor?
Çoğu markanın web sitesinin mobil arabirimlerine veya mobil uygulamalarına baktığımızda hamburger menü ikonuyla tetiklenen yan menü kullanımıyla karşılaşırız. Fakat hamburger menü olarak adlandırılan menülerin, yarardan çok zarara yol açtığına dair birçok bilgi mevcut.
Gelin konuyu, bahsi geçen kullanımların problemleri ve çözümleri şeklinde değerlendirelim.
Hamburger menü kullanımıyla ilgili birçok kullanıcı testi verisi mevcut ve tüm sonuçlar, hamburger menu kullanımının aslında pek sağlıklı bir alternatif olmadığını gösteriyor. Bilinenlerin bazılarına şu bağlantılardan da ulaşabilirsiniz:
Varsayılan durumda, yan menü ve tüm içerikleri gizli durumdadır.
Öncelikle kullanıcıların yan menüleri, etkileşimli birer öğe olarak tanımlayabilmesi gerekir. Herhangi bir istisnai durumdan ötürü, ana menü başlıklarını gizlemek zorundaysanız (markanın 34857820 tane ana menü başlığı istemesi gibi) ve hamburger menü kullanımından başka yapabileceğiniz bir şey yoksa, hamburger ikonunu bir “menü” etiketiyle beraber değerlendirmenizi tavsiye ederim. Ancak bu çözüm, ana ekranda değerin büyük kısmının sunulduğu uygulamalarda geçerli olmayabilir.
Daha az verim
Hamburger menünün kullanıcı tarafından ilk bakışta seçilebildiğini varsaysak bile kullanıcılara, aradıkları içeriğe ulaşabilmeleri için fazladan tıklama yaptırarak, bir bariyer daha koymuş oluyoruz.
Ana menü başlıklarının sürekli görünür olduğu, tam tersi bir örneği aşağıda bulabilirsiniz.
İşletim sisteminin navigasyon yapısı ile uyuşmazlık
iOS işletim sistemine sahip platformlarda hamburger menünün, standart navigasyon yapısıyla uyuşmazlık yaratmadan, basitçe uyumlu hale getirilmesi biraz sıkıntılıdır.
Sol üstte kullanacağınız hamburger menü öğesi ile kullanıcının geri gidebilmesi için koymanız gereken butonun birlikte kullanımı, yüksek olasılıkla karışıklığa neden olacaktır. Ya yukarıda gösterilen hatayı yapacak ve “geri” butonunu navigasyon menüsünde konumlandıracaksınız (ve bunu yaparken o alanda sıkışıklığa neden olup, tıklanmayı da zorlaştıracaksınız) ya da aşağıda görüldüğü gibi kullanıcıları menüye erişmek için farklı ekranlardan geçiş yapmak zorunda bırakacaksınız:
İlk bakışta anlaşılamama
Kullanıcıya, uygulamanın arka planında kalan bilgilerin bir kısmını sunabilmek için Jawbone UP App’teki gibi bir yol izlebilirsiniz. Yani hamburger menünün yer aldığı alanda, bildirimi belli eden bir simge gösterilebilir.
Fakat eğer uygulamanızda, bildirimi olan birçok kategori varsa iş değişir. Twitter’daki gibi, kullanıcının bildirim içeriğini anlamasını ve bu bildirimle ilgili aksiyon alabileceği ekrana geçebilmesini mümkün kılan bir kurguyu uygulamanız daha sağlıklı olacaktır.
Çözüm
Problemler hakkında birçok şey yazıldı; ancak çözüm birçok kişi için hala net değil.
Kavrama
Hamburger menü yapısını, sınırlı ekran alanından daha çok yararlanabilmek için kullanmak zorunda olduğunuzu ve kullanıcılarınızın, gözlerinin önünde yer alan her öğeyi doğru anlamlandırdığını düşünebilirsiniz; ancak her birimizin bir odak noktası bulunur, daha küçük boyutlu ekranlarda bile 1.
Önemli olan, kullanıcının odaklanmasını istediğiniz alanlara ait hiyerarşiyi belirleyip, doğru konumlandırmayı yapabilmenizdir.
Ekran alanından maksimum faydayı sağlamak istiyorsanız, bunu yanlış navigasyon kurgularına sebep olmadan ve temel insan-bilgisayar etkileşimi prensiplerine bağlı kalarak yapabilirsiniz.
Yeri gelmişken; belki de ihtiyacımız olan, insan-bilgisayar etkileşim anlayışımızı yenilemektir. Eminim ki bu yaklaşım, “tasarım” kavramını “bir probleme çözüm tasarlamak” olarak yerine sadece görsel estetik önceliğiyle algılayan tasarımcıların çalışmalarında karşılaşmaya alıştığımız birçok hatayı da önleyecektir.
Hamburger menüyü ne zaman kullanmalıyız?
Nadiren de olsa, hamburger menü kullanımının anlamlı olduğu durumlar olabilir; ancak genel kural, bu modelden tamamiyle kaçınmaktır.
IRCCloud, kanallar ve kanal üyeleri arasında navigasyon sağladığı için bu kullanımın bir anlamda mantıklı olduğu bir örnektir.
Ana ekranın hiyerarşik navigasyon kurgusu gerektiren ek ekranlarının bulunmaması ve medyanın açılır pencere ile sunulması, hamburger menü kullanımı için kabul edilebilir bir durumdur. Ancak bu senaryoda bile, bilgi mimarisinin gözden geçirilmesi gerektiği görülüyor.
Kanalların yer aldığı yan menü, kanalla ilgili tüm aksiyonların olduğu bir butonu barındırma şansını yok ediyor. Bunun yerine tasarımcının; “kanal”, “network” ve “hesap” gibi farklı içeriklerden yola çıkılan aksiyonları tek bir aksiyon sayfasında birleştirme dışında bir şansı kalmamış.
Bu da, bizi bu yazının bir sonraki bölümüne yönlendiriyor.
Bunun yerine ne kullanabiliriz?
Yan menü kullanımı, birçok yönden olumsuz deneyim sağlar çünkü menüye eklediğiniz yeni bir başlık, (insanlar onu gerçekten kullanmaya başlayana ya da tesadüfen fark edene kadar) hiçbir sonuca ulaşmayabilir.
Yan menü kullanımı ile menü başlıklarını kullanıcıya direkt sunmak arasındaki farkı yukarıdaki örnekte de görebilirsiniz.
Burada ayırt etmeniz gereken önemli bir nokta var. Kullanıcının sadece scroll ederek etkileşime geçeceği bir pazarlama ya da ürün web sitesinin mobil çözünürlüklere uygun halini kurgularken, yan menü kullanımı çok da verimsiz bir çözüm olmayacaktır. Çünkü bu tip bir kurguda, kullanıcı zaten scroll ederek tüm içeriği tüketebilecektir. Kullanıcıdan gizlediğiniz veya kullanıcının keşfetmesini beklediğiniz herhangi bir başlık ya da içerik olmayacaktır. Yan menüyü de, kurguladığınız bu tek sayfalık web sitesinde bir navigasyon öğesi olarak konumlandırabilirsiniz. Menüde yer alan herhangi bir başlığa tıklayınca, o başlığa ait bölüme scroll etmesini sağlamış olursunuz.
Çıkarılabilecek dersler
Mesajlar sekmesinde durum doğrudan sunulabilir
Öğeler her zaman görünür ve kolayca erişilebilir şekilde olmalıdır
Birçok navigasyon kullanımında doğru hiyerarşinin sağlanması gerekir
Bu tip büyük sorunları çözmenin yanı sıra, navigasyon sekmesini ekran kaydırma yönünde gizleyerek (Facebook ve Safari’de olduğu gibi) dikey bir alanı boş tutabilir ve yer kazanabilirsiniz. Tab bar kullanımı, navigasyon menüsüne gerek kalmadan mevcut ekranı göstermek için kullanılabilir.
Minimal bir çözüme ihtiyacınız varsa, belki de tool bar sizin için yeterli olacaktır. Buradaki kilit nokta, navigasyonu gizlememek; direkt erişim sağlamak ve navigasyon hareketleriyle çakışmaya engel olmaktır.
Yukarıdaki örnekten farklı olarak, 5’ten fazla ana başlık kullanımına ihtiyaç duyuyorsanız da, yan menü kullanarak kullanıcının çok sık kullanacağı başlıkları da gizlemek yerine, aşağıdaki örnekte yer alan kurguya benzer şekilde de ilerleyebilirsiniz.
Şu ana kadar anlattığım tüm noktalarda en önemli konu (hatta işin çıkış noktası) bilgi mimarisini iyi kurgulamanız. İçeriklerinizi, ürününüzün hedef kitlesini ve hedef kitlenizin bu ürünü kullanma motivasyonunu aklınızdan çıkarmayarak gruplamanız ve kurgulamanız gerekir. Ve tabii ki işin, yayına çıkmakla bitmediğini; (ürününüzün yayına çıkışını, kullanıcıyla buluştuğu an olarak kabul edersek) aksine yeni başladığını unutmamalısınız.
Bundan sonrası; daha iyisini yapabilmek için test etmek, test sonuçlarına göre deneyiminizi optimize edip, ürününüzü zamana ayak uyduran hale getirmek üzerine yapacağınız birçok çalışmadan oluşur.
